<template>
  <div class="aduss">
    <div class="header">
      <van-nav-bar title="选择地区">
        <template #left>
          <van-icon
            name="arrow-left"
            :size="20"
            color="#000000"
            @click="hanclick"
          />
        </template>
      </van-nav-bar>
      <van-search
        v-model="value"
        shape="round"
        placeholder="请输入所选择的地区名字"
      >
        <template #left-icon>
          <van-icon class-prefix="iconfont" name="extra" />
        </template>
      </van-search>
    </div>

    <div class="adu">
      <van-tree-select
        height="100%"
        @click-item="adussclick"
        v-model:active-id="state.activeId"
        v-model:main-active-index="state.activeIndex"
        :items="state.items"
      />
    </div>
  </div>
</template>
<script>
import NProgress from "nprogress";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { computed, onMounted, reactive, ref } from "vue";
export default {
  setup() {
    const router = useRouter();
    const store = useStore();
    const value = ref("");
    let arr = [];
    let arr1 = [];
    let obj = {};
    let items = [];
    let children = [];
    let obj1 = {};
    const state = reactive({
      activeId: 1,
      activeIndex: 0,
      items,
    });
    // NProgress.inc(0.2);
    NProgress.configure({ showSpinner: false }); // 通过设置为false来关闭加载旋转器
    router.beforeEach(async () => {
      NProgress.start();
    });
    router.afterEach(() => {
      NProgress.done();
    });
    //计算属性拿取vuex里面的数据
    const aduss = computed(() => store.state.aduss);

    onMounted(() => {
      //取数据，数组的每一项为对象
      setaduss().then(() => {
        for (let val in aduss.value[0]) {
          arr.push(aduss.value[0][val]);
        }
        //截取数组
        arr = arr.slice(0, arr.length - 1);

        //遍历数组 结构出省份
        arr.forEach((val) => {
          obj.text = val.name;
          state.items.push({ ...obj });
          for (let value in val.cities) {
            arr1.push(val.cities[value].districts);
          }
        });
        //遍历数组 结构出市区
        arr1.forEach((item, index) => {
          for (let v in item) {
            obj1.text = item[v];
            obj1.id = v;
            children.push({ ...obj1 });
          }
          state.items[index].children = children;
          children = [];
        });
        // console.log(items);
        // console.log(arr1);
      });
    });
    //路由跳转
    const hanclick = () => {
      router.push("/home/finddoctor");
    };

    const adussclick = (data) => {
      store.commit("cityname", data);
      setTimeout(() => {
        router.push("/home");
      }, 300);
    };

    const setaduss = async () => await store.dispatch("getadusstal");

    // setTimeout(() => {}, 1000);

    return {
      value,
      setaduss,
      adussclick,
      hanclick,
      arr,
      obj1,
      arr1,
      children,
      state,
      items,
      obj,
      // ndexList,
    };
  },
};
</script>
<style lang="less" scoped>
html,
body {
  @font-face {
    font-family: "iconfont";
    src: url("../assets/font/iconfont.ttf") format("truetype");
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    opacity: 0.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .iconfont-extra::before {
    content: "\e62d";
  }
  .van-field__control {
    font-size: 14px;
    font-weight: 500;
  }
  .van-tree-select {
    position: relative;
  }
  .van-sidebar {
    margin-top: 54px;
  }
  .van-tree-select__content {
    width: 65%;
    height: 100%;
    position: fixed;
    top: 100px;
    right: 0;
  }
  height: 100%;
  .header {
    background: white;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .van-nav-bar__title {
    // width: 128px;
    height: 25px;
    font-size: 18px;
    font-weight: 445;
    color: #333333;
    line-height: 25px;
  }
  .adu {
    margin-top: 102px;
  }
}
</style>
